import React, { PureComponent } from 'react'
import BeScroll from "@better-scroll/core"
import Pullup from '@better-scroll/pull-up';
import fd from "../../utils/fd"
BeScroll.use(Pullup)

export default class Loading extends PureComponent {
    state = {
        Y: 0,

    }

    componentDidMount() {

        this.scroll = new BeScroll("." + this.props.myClass, {
            pullUpLoad: true,
            click: true,
            scrollY: true,
            probeType: 3,
            startY: this.state.Y
        })
        if (this.props.start) {
            //监听触底事件
            this.scroll.on('pullingUp', () => {
                if (this.props.total >= this.props.start * 10) {
                    fd(() => this.props.setStart(this.props.start + 1))
                    this.scroll.refresh();//dom更新刷新滚动条
                    this.scroll.finishPullUp();
                    this.setState({ Y: this.scroll.y }, () => {
                        this.scroll.refresh();//dom更新刷新滚动条
                        this.scroll.finishPullUp();//结束上啦加载

                    })//保存这次的位置
                } else {
                    this.scroll.closePullUp();
                    console.log("没有更多了");

                }
            })
        }
    }

    componentDidUpdate() {
        this.scroll = new BeScroll("." + this.props.myClass, {
            pullUpLoad: true,
            click: true,
            scrollY: true,
            probeType: 3,
            startY: this.state.Y
        })
        if (this.props.start) {
            //监听触底事件
            this.scroll.on('pullingUp', () => {
                if (this.props.total >= this.props.start * 10) {
                    fd(() => this.props.setStart(this.props.start + 1))
                    this.scroll.refresh();//dom更新刷新滚动条
                    this.scroll.finishPullUp();
                    this.setState({ Y: this.scroll.y }, () => {
                        this.scroll.refresh();//dom更新刷新滚动条
                        this.scroll.finishPullUp();//结束上啦加载
                    })//保存这次的位置
                } else {
                    this.scroll.closePullUp();
                    console.log("没有更多了");
                }
            })
        }
    }

    render() {
        return (
            <div className={this.props.myClass} style={{ width: "100%", height: "100%" }}>
                {this.props.children}
            </div>
        )
    }
}
